<template>
    <div class="person">
      <h2>当前求和：{{ sum }}</h2>
      <button @click="add">点我加1</button>
    </div>
</template>



<script lang="ts" setup name="Person">
    import {ref,onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue'

    //数据
    let sum=ref(0)

    //方法
    function add(){
        sum.value+=1
    } 

    //创建
    console.log('创建')

    //挂载前
    onBeforeMount(()=>{
        console.log('挂载前')
    })
    //挂载完成
    onMounted(()=>{
        console.log('挂载完成')
    })
    //更新前
    onBeforeUpdate(()=>{
        console.log('更新前')
    })
    //更新完成
    onUpdated(()=>{
        console.log('更新完成')
    })
    //销毁前
    onBeforeUnmount(()=>{
        console.log('销毁前')
    })
    //销毁完成
    onUnmounted(()=>{
        console.log('销毁完成')
    })

</script>






<style scoped>
    .person {
        background-color: aqua;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button {
        margin: 0 5px;
    }
</style>